<template>
	<view>
		<!-- 顶部标题组件 -->
		<tabsTop :isSubmit="true" @submit="revise" tabName="个人信息"></tabsTop>
		<!-- 标题 -->
		<view class="font text-muted mx-2 py-2">基本信息</view>
		<!-- 基本信息 -->
		<view class="bg-white">
			<!-- 头像 -->
			<!-- v-if="screenWidth < 480" -->
			<view  class="mx-2 py-2 flex align-center border-bottom border-light">
				<text class="font text-dark flex-shrink mr-2" style="width: 25%;">头像</text>
				<view class="w-100 flex justify-between align-center">
					<button plain="true" class="p-0 m-0 rounded-circle" style=" width: 80rpx; height: 80rpx;"
						open-type="chooseAvatar" @chooseavatar="onChooseavatar">
						<image :src="form.Image" style="width: 80rpx; height: 80rpx;"></image>
					</button>
					<!-- <uni-icons type="right" color="#828d96" size="16"></uni-icons> -->
				</view>
			</view>
			<!-- <view v-if="screenWidth > 480" class="">
				<view class="info_list" @click="chooseImage">
							<p>头像</p>
							<view>
								<image :src="form.Image" mode=""></image>
								<uni-icons type="arrowright" size="18" color="#A4A4A4"></uni-icons>
							</view>	
				</view>
			</view> -->
			<!-- 昵称 -->
			<view class="mx-2 py-2 flex align-center" @click="handleTitle('修改')">
				<text class="font text-dark flex-shrink mr-2" style="width: 25%;">昵称</text>
				<view class="w-100 flex justify-between align-center">
					<text class="font">{{ form.Nick ? form.Nick : '请填写' }}</text>
					<uni-icons type="right" color="#828d96" size="16"></uni-icons>
				</view>
			</view>
			<!-- 姓名 -->
			<view class="mx-2 py-2 flex align-center" @click="handleTitle('修改姓名')">
				<text class="font text-dark flex-shrink mr-2" style="width: 25%;">姓名</text>
				<view class="w-100 flex justify-between align-center">
					<text class="font">{{ form.Member_Name ? form.Member_Name : '请填写' }}</text>
					<uni-icons type="right" color="#828d96" size="16"></uni-icons>
				</view>
			</view>
			<!-- 手机号 -->
			<view class="mx-2 py-2 flex align-center  border-bottom border-light" @click="handleTitle('修改手机号')">
				<text class="font text-dark flex-shrink mr-2" style="width: 25%;">手机号</text>
				<view class="w-100 flex justify-between align-center">
					<text class="font">{{ form.Mobile ? maskedPhoneNumber(form.Mobile) : '请输入手机号' }}</text>
					<uni-icons type="right" color="#828d96" size="16"></uni-icons>
				</view>
			</view>
			<!-- 性别 -->
			<view >
				<view @click="handlePopup" v-if="screenWidth < 480" class="mx-2 py-2 flex align-center border-bottom border-light">
					<text class="font text-dark flex-shrink mr-2" style="width: 25%;">性别</text>
					<view class="w-100 flex justify-between align-center">
						<text class="font">{{ form.Sex ? form.Sex : '未知' }}</text>
						<uni-icons type="right" color="#828d96" size="16"></uni-icons>
					</view>	
				</view>
				<view v-else style="display: flex;align-items: center;width: 100%;" class="mx-2 py-2 flex align-center border-bottom border-light">
					<view class="font text-dark flex-shrink mr-2" style="width: 25%;">性别</view>
					<view class="flex justify-between align-center" style="width: 25%;">
						<uni-data-select v-model="value" placeholder="请选择" :localdata="range" @change="changesex"></uni-data-select>
					</view>
				</view>
			</view>
			<!-- 生日 -->
			<view class="mx-2 py-2 flex align-center border-bottom border-light">
				<text class="font text-dark flex-shrink mr-2" style="width: 25%;">生日</text>
				<view class="w-100 flex justify-between align-center">
					<picker mode="date" @change="bindDateChange">
						<text class="font">{{form.Birthday? form.Birthday : '请选择生日'}}</text>
					</picker>
					<uni-icons type="right" color="#828d96" size="16"></uni-icons>
				</view>
			</view>
			<!-- 地区 -->
			<view v-if="screenWidth < 480" class="mx-2 py-2 flex align-center border-bottom border-light">
				<text class="font text-dark flex-shrink mr-2" style="width: 25%;">地区</text>
				<view class="w-100 flex justify-between align-center">
					<picker mode="region" @change="bindAdressChange">
						<text class="font">{{form.Address? form.Address: '请选择地区'}}</text>
					</picker>
					<uni-icons type="right" color="#828d96" size="16"></uni-icons>
				</view>
			</view>
			<view v-else class="mx-2 py-2 flex align-center border-bottom border-light-secondary">
						<text class="font text-dark flex-shrink mr-2" style="width: 25%;">地区</text>
						<uni-data-select
					      v-model="value1"
					      :localdata="provinces"
					      @change="change1"
						  placeholder="请选择省"
					    ></uni-data-select>
						 <uni-data-select
						   v-model="value2"
						   :localdata="cities"
						   @change="change2"
						   placeholder="请选择市"
						 ></uni-data-select>
						 <uni-data-select
						   v-model="value3"
						   :localdata="areas"
						   @change="change3"
						   placeholder="请选择区"
						 ></uni-data-select>
						
			</view>
			<!-- 收货地址 -->
			<view class="mx-2 py-2 flex justify-between align-center" @click="handleAddress">
				<text class="font text-dark">收货地址</text>
				<uni-icons type="right" color="#828d96" size="16"></uni-icons>
			</view>
		</view>
		<!-- 通用设置 -->
		<!-- <view class="font text-muted py-2 mx-2">通用设置</view> -->
		<!-- 个性化推荐 -->
		<!-- <view class="flex justify-between align-center p-2 bg-white" style="font-size: 12px;">
			<view>
				<view style="line-height: 1.8;">个性化推荐</view>
				<view>开启后可看到你感兴趣的内容，建议开启</view>
			</view>
			<view class="flex">
				<view>已允许</view>
				<uni-icons type="right" color="#828d96" size="16"></uni-icons>
			</view>
		</view> -->
		<!-- 保存 -->
		<view>
			<button @click="revise" class="baocun">保存</button>
		</view>
		<!-- 性别选择器 -->
		<view v-if="genderPopupVisible" class="popup" @click="handlePopup">
			<view class="popup-content">
				<view class="font" @click="selectGender('男')">男</view>
				<view class="font" @click="selectGender('女')">女</view>
				<view class="bg-light" style="height: 10rpx;"></view>
				<view @click.stop="handlePopup" class="font">取消</view>
			</view>
		</view>
		<!-- 提示框 -->
		<prompt v-if="isShow" :title="title" @cancel="cancel" @confirm="confirm"></prompt>
	</view>
</template>

<script>
	import { CityData } from "../../static/js/city.js";
	const app = getApp();
	import {
		getInquiryIDOriginal,
		getEditAction
	} from "@/api/global.js";
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import prompt from "@/components/tool/prompt.vue"
	export default {
		components: { //轮播图组件
			tabsTop,
			prompt,
		},
		data() {
			return {
				form1:{
					Address1:[],
				},
				screenWidth: uni.getSystemInfoSync().windowWidth,
				value1: 1,
				value2: 1,
				value3: 1,
				a:'',
				b:'',
				c:'',
				provinces: [], // 省份列表
				cities: [], // 城市列表，根据选择的省份动态生成
				areas: [], // 区域列表，根据选择的城市动态生成
				form: {
					Image: '',
					Nick: '',
					Mobile: '',
					Sex: '',
					Birthday: '',
					Address: '',
				},
				Address: [], //地址
				genderPopupVisible: false, // 弹窗是否可见
				isShow: false, //弹窗
				gender: ['男', '女'],
				range: [{
						value: 0,
						text: "男"
					},
					{
						value: 1,
						text: "女"
					},
					{
						value: 2,
						text: "未知"
					},
				],
				title: '',
				loading: false,
			}
		},
		mounted() {
			this.form1.Address1 = (CityData().Address)()
			console.log('this1.form1.Address',this.form1.Address1)
			this.onprovinces()
		},
		onLoad(e) {
			console.log(e)
			this.getData(e.Member_SerialNumber);
		},
		computed: {
			maskedPhoneNumber() { //手机号掩码
				return function(str) {
					try {
						return str.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
					} catch {
						return '';
					}
				}
			},
		},
		methods: {
			onprovinces(){
				for(var i = 0;i<this.form1.Address1.length;i++){
					this.provinces[i] = this.form1.Address1[i]
					// console.log(this.provinces)
				}
			},
			change1(e) {
			      // 根据选择的省份动态生成对应的城市列表
				 const targetIndex = this.provinces.findIndex(item => item.value == this.value1);
				 console.log(this.provinces[targetIndex].text)
				 this.a = this.provinces[targetIndex].text
				 this.cities = this.provinces[targetIndex].children
				 this.b = ''
				 this.c = ''
				 this.value2 = ''
				 this.value3 = ''
			},
			change2(e) {
			      // 根据选择的城市动态生成对应的区域列表
				  const targetIndex = this.cities.findIndex(item => item.value == this.value2);
				  console.log(this.cities[targetIndex].text)
				  this.b = this.cities[targetIndex].text
				  this.areas = this.cities[targetIndex].children
				  this.c = ''
				  this.value3 = ''
			    },
			change3(){
				const targetIndex = this.areas.findIndex(item => item.value == this.value3);
				console.log( this.areas[targetIndex].text)
				this.c = this.areas[targetIndex].text
				this.form.Address = this.a+'/'+this.b+'/'+this.c
			},
			changesex(e){
				this.form.Sex = this.range[e].text
				console.log('eeee',this.range[e].text)
			},
			async getData(Primary_Key) { //查询
				const res = await getInquiryIDOriginal({
					Primary_Key_Name: 'Member_SerialNumber',
					Primary_Key: Primary_Key,
					Data: 'member_info',
					Open_ID: app.globalData.Open_ID
				})
				console.log('getInquiryIDOriginal',res)
				if (res.length == 1) {
					this.form = res[0]
				}
			},
			async revise() {
				//判断是否有修改
				let lb_Boolean = false;
				for (let key in this.form) {
					if (key.indexOf("_Original") == -1 && this.form[key] != this.form[key + '_Original']) {
						lb_Boolean = true
						break;
					}
				}
				if (!this.loading && lb_Boolean) {
					this.loading = true
					uni.showLoading({
						title: "提交中...",
					});
					const res = await getEditAction({
						Data: JSON.stringify({
							Modify: {
								member_info: [this.form]
							}
						}),
						Open_ID: app.globalData.Open_ID
					})
					uni.hideLoading();
					this.loading = false;
					if (res.Status == "success") {
						uni.showToast({
							title: '修改成功！',
							icon: 'success'
						})
						app.globalData.memberInfo.Image = this.form.Image;
						app.globalData.memberInfo.Nick = this.form.Nick;
						app.globalData.memberInfo.Mobile = this.form.Mobile;
						const timer = setTimeout(() => {
							clearTimeout(timer)
							uni.navigateBack() //后退
						}, 500)
					} else {
						uni.showToast({
							title: '修改失败！',
							icon: 'error'
						})
						const timer = setTimeout(() => {
							clearTimeout(timer)
							uni.navigateBack() //后退
						}, 500)
					}
				} else {
					uni.navigateBack() //后退
				}
			},
			handleAddress() { //跳转到收货地址
				uni.navigateTo({
					url: '/pages/delivery/address'
				});
			},
			change(e) {
				console.log("e:", e);
			},
			chooseImage(){
				uni.chooseImage({
					count:1,
					sizeType: ['original', 'compressed'],
					success: (res) => {
						const tempFilePaths =res.tempFilePaths//图片临时数组
						console.log(tempFilePaths)
						uni.uploadFile({
						//请求的url接口地址
							url:'http://192.168.3.195:8080/api/member/member/uploadHeadImage',
							formData:{
								//请求中接口额外的参数
								id:'1385048044696801281'
							},
							fileType:'image',//图片类型
							filePath:tempFilePaths[0],//哪张图片
							name:'file',//对应接口的文件名称
							header:{//请求头
								"Content-Type": "multipart/form-data"
							},
							success:(res)=>{
							//成功的回调
								//一般用于重新获取数据渲染页面
								console.log(res)
							},
							fail:(err)=>{
							//失败的回调
								console.log(err)
							}
						})
					}
				})
			},
			onChooseavatar(e) { //选择图片
			    console.log(e)
				this.form.Image = e.detail.avatarUrl;
				let _this = this
				uni.getFileSystemManager().readFile({
					filePath: e.detail.avatarUrl, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: (res) => { //成功的回调
						_this.form.Image = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
					},
					fail: (e) => {
						console.log("图片转换失败");
					}
				})
			},
			handleTitle(str) { //开启弹窗
				this.isShow = true
				this.title = str
			},
			cancel() { //关闭弹窗
				this.isShow = false
			},
			confirm(str) { //确认
				if (this.title === "修改") {
					this.form.Nick = str
					console.log(str)
				} else if (this.title === "修改姓名") {
					this.form.Member_Name = str
				} else if (this.title === "修改手机号") {
					this.form.Mobile = str
				}
				this.isShow = false
			},
			bindAdressChange(e) { //选择地址
				this.Address = e.detail.value
				this.form.Address = this.Address[0] + "-" + this.Address[1] + "-" + this.Address[2];
			},
			handlePopup() { //男女选择器
				this.genderPopupVisible = !this.genderPopupVisible;
			},
			selectGender(gender) { //选择性别
				this.form.Sex = gender;
				this.genderPopupVisible = false;
				// console.log('this.form',this.form)
			},
			bindDateChange: function(e) { //选择生日
				this.form.Birthday = e.detail.value
			},
		}
	}
</script>

<style>
	page {
		background-color: #f8f9fa;
	}

	button[plain] {
		border: 0
	}

	.info_content {
		width: 50%;
	}

	.item {
		line-height: 2;
	}

	.popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popup-content {
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 18px;
		border-top-right-radius: 18px;
		box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
		bottom: 0;
		position: absolute;
	}

	.popup-content view {
		padding: 10px;
		text-align: center;
	}

	.baocun {
		width: 80%;
		margin: 44rpx auto;
		height: 76rpx;
		text-align: center;
		font-size: 33rpx;
		border-radius: 63rpx;
		background-color: cornflowerblue;
		color: white;
		align-items: center;
		justify-content: center;
		display: flex;
	}
</style>